<template>
  <div class="border-line card">
    <header-title :title="average" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <template v-if="isFullscren && areaID !== 0">
        <vue-seamless-scroll :data="list" :class-option="classOption" class="scroll-warp">
          <div class="a-flex a-row-between m-b-16" v-for="(item, index) in list" :key="index">
            <a-tag
              :color="index + 1 === 1 ? '#ff3232' : index === 2 ? '#ff9800' : index === 3 ? '#ffd200' : '#108ee9'"
              class="m-r-10"
              >{{ index + 1 }}</a-tag
            >
            <div class="m-r-10 text-center" style="width: 260px">
              <ellipsis :length="34" tooltip>{{ item.name }}</ellipsis>
            </div>
            <a-tooltip>
              <div slot="title">
                <div>总套数：{{ item.ZTS }}套</div>
                <div>已分配套数：{{ item.YFPTS }}套</div>
                <div>空置套数：{{ item.KZTS }}套</div>
              </div>
              <a-progress
                strokeColor="#ff3232"
                :percent="item.RZL * 100"
                size="small"
                :showInfo="false"
                style="flex: 1"
                class="m-r-10"
              />
            </a-tooltip>
            <span class="m-r-10 text-center text-success" style="width: 60px">{{
              `${(item.RZL * 100).toFixed(2)}%`
            }}</span>
          </div>
        </vue-seamless-scroll>
      </template>
      <template v-else>
        <vue-seamless-scroll :data="list" :class-option="classOption" class="scroll-warp">
          <div class="a-flex a-row-between m-b-16" v-for="(item, index) in list" :key="index">
            <a-tag
              :color="index + 1 === 1 ? '#ff3232' : index === 2 ? '#ff9800' : index === 3 ? '#ffd200' : '#108ee9'"
              class="m-r-10"
              >{{ index + 1 }}</a-tag
            >
            <div class="m-r-10 text-center" style="width: 100px">
              <a-tooltip :title="item.name">
                <ellipsis :length="14" tooltip>{{ item.simname }}</ellipsis>
              </a-tooltip>
            </div>
            <a-tooltip>
              <div slot="title">
                <div>总套数：{{ item.ZTS }}套</div>
                <div>已分配套数：{{ item.YFPTS }}套</div>
                <div>空置套数：{{ item.KZTS }}套</div>
              </div>
              <a-progress
                strokeColor="#ff3232"
                :percent="item.RZL * 100"
                size="small"
                :showInfo="false"
                style="flex: 1"
                class="m-r-10"
              />
            </a-tooltip>
            <span class="m-r-10 text-center text-success" style="width: 60px">{{
              `${(item.RZL * 100).toFixed(2)}%`
            }}</span>
          </div>
        </vue-seamless-scroll>
      </template>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { Ellipsis } from '@/components'
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from 'axios'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    vueSeamlessScroll,
    headerTitle,
    Ellipsis,
  },
  mounted() {
    this.fetchData()
  },
  data() {
    return {
      classOption: {
        singleHeight: 40,
      },
      list: [],
      average: '',
    }
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_GZFRZQK?RegionNo=${this.areaID}`).then((response) => {
        const {
          data: { DATA, Total },
        } = response
        this.list = DATA
        this.average = `公租房入住率（全市入住率平均值${(Total * 100).toFixed(2)}%）`
      })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    margin-top: 10px;
    height: 320px;
    font-size: 16px;
    overflow: hidden;
    cursor: default;
  }
}
/deep/ .ant-progress-inner {
  background-color: #0a337e;
}
</style>
